import React, {Component} from 'react';
import {
  View,
  Text,
  Alert,
  Button,
  ToastAndroid,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  Image,
  ImageBackground,
  StatusBar,
  FlatList,
} from 'react-native';
import {tokenRecord, getTokenAndPower} from '../../api/index';
import {HeaderLeft, HeaderRight} from '../../components';

let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
export default class DirectListPage extends Component {
  static navigationOptions = ({navigation}) => ({
    headerStyle: {
      backgroundColor: '#fff',
      borderBottomWidth: 0,
      height: 44,
      elevation: 0,
    },
    headerTitleStyle: {
      flex: 1,
      textAlign: 'center',
      color: '#333',
      fontSize: 17,
      fontWeight: '400',
    },
    headerLeft: <HeaderLeft triggerBack={() => navigation.goBack()} />,
    headerRight: <HeaderRight />,
    headerBackTitle: null,
  });
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      crteate_time: '',
      reason: '',
      amount: '',
      isLoading: true,
      role: '',
      number: '',
      data: '',
      tokenCount: '',
    };
  }

  async getHistory() {
    const result = await tokenRecord({pageNo: '1'});
    const tokenAndPower = await getTokenAndPower();
    this.setState({
      data: result.data,
      tokenCount: tokenAndPower.data.token_count,
    });

    console.log(result);
    console.log(tokenAndPower.data.token_count);
  }

  componentDidMount(): void {
    this.getHistory();
    // this.getamount();
  }

  render() {
    /*   if(this.state.isLoading){
          return <View/>
        }
    */
    return (
      <View style={styles.containerStyle}>
        <View
          style={{width: widthScreen, height: 1, backgroundColor: '#DCDCDC'}}
        />
        <View style={styles.scrollStyle}>
          <View style={styles2.introductionViewStyle}>
            <Text style={styles2.introductionTitleStyle}>我的碱基资产</Text>
            <Text style={styles2.introductionTextStyle}>
              {this.state.tokenCount}
            </Text>
            <View
              style={{
                width: (319 / 375) * widthScreen,
                height: 0.5,
                backgroundColor: '#3C8AF6',
                marginTop: (31 / 650) * heightScreen,
              }}
            />
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  width: (338 / 375 / 2) * widthScreen,
                }}>
                <Text style={styles2.withdrawStyle}>提现</Text>
              </View>
              <View
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  width: (338 / 375 / 2) * widthScreen,
                }}>
                <Text style={styles2.chargeStyle}>充值</Text>
              </View>
            </View>
          </View>

          <ScrollView style={styles.scrollStyle}>
            {
              <FlatList
                data={this.state.data}
                renderItem={({item}) => {
                  return (
                    <Base
                      reason={item.reason}
                      time={item.create_time}
                      number={item.amount}
                    />
                  );
                }}
              />
            }
            {/*<Base reason={'aaa'} times={'2019/11/29'} number={123123} />*/}
          </ScrollView>
        </View>
      </View>
    );
  }
}

class Base extends Component {
  render() {
    //const {reason, create_time, amount} = this.props;
    return (
      <View style={{alignItems: 'center', backgroundColor: '#FFFFFF'}}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'space-around',
            justifyContent: 'space-between',
            width: widthScreen,
          }}>
          <View
            style={{
              marginTop: (20.5 * 650) / heightScreen,
              marginLeft: (27 * 350) / widthScreen,
              flexDirection: 'column',
            }}>
            <Text style={styles2.reasonStyle}>{this.props.reason}</Text>
            <Text style={styles2.timeStyle}>{this.props.times}</Text>
          </View>
          <View
            style={{
              marginTop: (20.5 * 650) / heightScreen,
              flexDirection: 'column',
              marginRight: (27 * 350) / widthScreen,
            }}>
            <Text style={styles2.numberStyle}>{this.props.number}</Text>
          </View>
        </View>
        <View
          style={{
            alignItems: 'center',
            width: (319 / 375) * widthScreen,
            height: 0.5,
            backgroundColor: '#D2D2D2',
            marginTop: (15 / 650) * heightScreen,
          }}
        />
      </View>
    );
  }
}
let styles: *;
styles = StyleSheet.create({
  containerStyle: {
    width: widthScreen,
    height: heightScreen,
    backgroundColor: '#F3F7FA',
    alignItems: 'center',
  },
  titleViewStyle: {
    backgroundColor: '#FFFFFF',
    height: (58 / 650) * heightScreen,
    width: widthScreen,
  },
  titleTextStyle: {
    textAlign: 'center',
    width: widthScreen,
    top: (33 / 650) * heightScreen,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: (14 * 650) / heightScreen,
  },
  scrollStyle: {
    backgroundColor: '#F3F7FA',
  },
  subtitleStyle: {
    marginTop: (20.5 / 650) * heightScreen,
    marginLeft: (4 / 375) * widthScreen,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: (15 * 650) / heightScreen,
  },
  timeStyle: {
    textAlign: 'left',
    marginTop: (19 / 650) * heightScreen,
    color: '#656565',
    fontSize: (14 * 650) / heightScreen,
  },
  reasonStyle: {
    textAlign: 'left',

    //fontFamily: 'MicrosoftYaHei',
    color: '#656565',
    fontSize: (14 * 650) / heightScreen,
  },
  numberStyle: {
    width: (76 / 375) * widthScreen,
    textAlign: 'right',
    //fontFamily: 'MicrosoftYaHei',
    color: '#333333',
    fontSize: (14 * 650) / heightScreen,
  },
});
const styles2 = StyleSheet.create({
  introductionViewStyle: {
    backgroundColor: '#256AF5',
    width: (338 / 375) * widthScreen,
    height: (168.5 / 650) * heightScreen,
    borderRadius: (5 * 650) / heightScreen,
    marginTop: (20 / 650) * heightScreen,
    marginLeft: (19.5 / 375) * widthScreen,
    alignItems: 'center',
    flexDirection: 'column',
  },
  introductionTitleStyle: {
    color: '#FFFFFF',
    marginTop: (35 / 650) * heightScreen,
    textAlign: 'center',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: (15 * 650) / heightScreen,
  },
  introductionTextStyle: {
    color: '#FFFFFF',
    textAlign: 'center',
    marginTop: (15.5 / 650) * heightScreen,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: (20 * 650) / heightScreen,
  },
  withdrawStyle: {
    color: '#FFFFFF',
    marginTop: (16 / 650) * heightScreen,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: (14 * 650) / heightScreen,
    textAlign: 'center',
  },
  chargeStyle: {
    color: '#FFFFFF',
    marginTop: (16 / 650) * heightScreen,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: (14 * 650) / heightScreen,
    textAlign: 'center',
  },
});
const feedbackStyle = StyleSheet.create({
  viewStyle1: {
    backgroundColor: '#FFFFFF',
    width: widthScreen,
    height: 575,
    marginTop: 6,
  },
  textInputBackgroundStyle: {
    backgroundColor: '#F8F6F9',
    width: (338 / 375) * widthScreen,
    height: (168 / 650) * heightScreen,
    marginLeft: (widthScreen - (338 / 375) * widthScreen) / 2,
    borderRadius: 5,
    marginTop: (20 / 667) * heightScreen,
  },
});
const buttonStyle = StyleSheet.create({
  longFilled: {
    justifyContent: 'center',
    alignItems: 'center',
    width: (338 * 375) / widthScreen,
    height: (33 / 650) * heightScreen,
    borderRadius: 5,
    backgroundColor: '#2AA0F2',
    marginTop: (39 / 650) * heightScreen,
    marginLeft: (widthScreen - (338 / 375) * widthScreen) / 2,
  },
});
